$(document).ready(function () {


    function getNow() {
        var now = new Date();

        return {
            hours: now.getHours() + now.getMinutes() / 60,
            minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
            seconds: now.getSeconds() * 12 / 60
        };
    };

    /**
     * Pad numbers
     */
    function pad(number, length) {
        // Create an array of the remaining length +1 and join it with 0's
        return new Array((length || 2) + 1 - String(number).length).join(0) + number;
    }

    var now = getNow();

    // Create the chart
    $('#clockContainer').highcharts({
            chart: {
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false,
                height: 200
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },

            title: {
                text: '系统时间'
            },

            pane: {
                background: [
                    {
                        // default background
                    },
                    {
                        // reflex for supported browsers
                        backgroundColor: Highcharts.svg ? {
                            radialGradient: {
                                cx: 0.5,
                                cy: -0.4,
                                r: 1.9
                            },
                            stops: [
                                [0.5, 'rgba(255, 255, 255, 0.2)'],
                                [0.5, 'rgba(200, 200, 200, 0.2)']
                            ]
                        } : null
                    }
                ]
            },

            yAxis: {
                labels: {
                    distance: -20
                },
                min: 0,
                max: 12,
                lineWidth: 0,
                showFirstLabel: false,

                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 5,
                minorTickPosition: 'inside',
                minorGridLineWidth: 0,
                minorTickColor: '#666',

                tickInterval: 1,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                title: {
                    text: 'Powered by<br/>lynx',
                    style: {
                        color: '#BBB',
                        fontWeight: 'normal',
                        fontSize: '8px',
                        lineHeight: '10px'
                    },
                    y: 10
                }
            },

            tooltip: {
                formatter: function () {
                    return this.series.chart.tooltipText;
                }
            },

            series: [
                {
                    data: [
                        {
                            id: 'hour',
                            y: now.hours,
                            dial: {
                                radius: '60%',
                                baseWidth: 4,
                                baseLength: '95%',
                                rearLength: 0
                            }
                        },
                        {
                            id: 'minute',
                            y: now.minutes,
                            dial: {
                                baseLength: '95%',
                                rearLength: 0
                            }
                        },
                        {
                            id: 'second',
                            y: now.seconds,
                            dial: {
                                radius: '100%',
                                baseWidth: 1,
                                rearLength: '20%'
                            }
                        }
                    ],
                    animation: false,
                    dataLabels: {
                        enabled: false
                    }
                }
            ]
        },

        // Move
        function (chart) {
            setInterval(function () {
                var hour = chart.get('hour'),
                    minute = chart.get('minute'),
                    second = chart.get('second'),
                    now = getNow(),
                // run animation unless we're wrapping around from 59 to 0
                    animation = now.seconds == 0 ?
                        false :
                    {
                        easing: 'easeOutElastic'
                    };

                // Cache the tooltip text
                chart.tooltipText =
                    pad(Math.floor(now.hours), 2) + ':' +
                        pad(Math.floor(now.minutes * 5), 2) + ':' +
                        pad(now.seconds * 5, 2);

                hour.update(now.hours, true, animation);
                minute.update(now.minutes, true, animation);
                second.update(now.seconds, true, animation);

            }, 1000);

        });

    // Extend jQuery with some easing (copied from jQuery UI)
    $.extend($.easing, {
        easeOutElastic: function (x, t, b, c, d) {
            var s = 1.70158;
            var p = 0;
            var a = c;
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            }
            else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        }
    });


    $('#vuContainer').highcharts({
            chart: {
                type: 'gauge',
                alignTicks: false,
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false,
                printButton: { enabled: false }
            },
            title: {
                text: '系统吞吐'
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            pane: {
                startAngle: -100,
                endAngle: 100
            },

            yAxis: [{
                min: 0,
                max: 200,
                lineColor: '#339',
                tickColor: '#339',
                minorTickColor: '#339',
                offset: -25,
                lineWidth: 2,
                labels: {
                    distance: -20,
                    rotation: 'auto'
                },
                tickLength: 5,
                minorTickLength: 5,
                endOnTick: false
            }, {
                min: 0,
                max: 124,
                tickPosition: 'outside',
                lineColor: '#933',
                lineWidth: 2,
                minorTickPosition: 'outside',
                tickColor: '#933',
                minorTickColor: '#933',
                tickLength: 5,
                minorTickLength: 5,
                labels: {
                    distance: 12,
                    rotation: 'auto'
                },
                offset: -20,
                endOnTick: false
            }],

            series: [{
                name: 'IN',
                data: [80],
                dataLabels: {
                    formatter: function () {
                        var kmh = this.y,
                            mph = Math.round(kmh * 0.621);
                        return '<span style="color:#339">in:      '+ kmh + ' mb/s</span><br/>' +
                            '<span style="color:#933">out:' + mph + ' mb/s</span>';
                    },
                    backgroundColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, '#DDD'],
                            [1, '#FFF']
                        ]
                    }
                },
                tooltip: {
                    valueSuffix: ' mb/s'
                }
            }]

        },
        // Add some life
        function(chart) {
            setInterval(function() {
                var point = chart.series[0].points[0],
                    newVal, inc = Math.round((Math.random() - 0.5) * 20);

                newVal = point.y + inc;
                if (newVal < 0 || newVal > 200) {
                    newVal = point.y - inc;
                }

                point.update(newVal);

            }, 3000);

        }
    );



    $('#chartContainer').highcharts({
        chart: {
            type: 'waterfall'
        },
        title: {
            text: 'Highcharts Waterfall'
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: 'USD'
            }
        },
        legend: {
            enabled: false
        },

        tooltip: {
            pointFormat: '<b>${point.y:,.2f}</b> USD'
        },

        series: [
            {
                upColor: Highcharts.getOptions().colors[2],
                color: Highcharts.getOptions().colors[3],
                data: [
                    {
                        name: 'Start',
                        y: 120000
                    },
                    {
                        name: 'Product Revenue',
                        y: 569000
                    },
                    {
                        name: 'Service Revenue',
                        y: 231000
                    },
                    {
                        name: 'Positive Balance',
                        isIntermediateSum: true,
                        color: Highcharts.getOptions().colors[1]
                    },
                    {
                        name: 'Fixed Costs',
                        y: -342000
                    },
                    {
                        name: 'Variable Costs',
                        y: -233000
                    },
                    {
                        name: 'Balance',
                        isSum: true,
                        color: Highcharts.getOptions().colors[1]
                    }
                ],
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
                    },
                    style: {
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        textShadow: '0px 0px 3px black'
                    }
                },
                pointPadding: 0
            }
        ]
    });


    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'flowContainer',
            events: {
                load: function () {

                    // Draw the flow chart
                    var ren = this.renderer,
                        colors = Highcharts.getOptions().colors,
                        rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
                        leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];


                    // Separator, client from service
                    ren.path(['M', 120, 40, 'L', 120, 330])
                        .attr({
                            'stroke-width': 2,
                            stroke: 'silver',
                            dashstyle: 'dash'
                        })
                        .add();

                    // Separator, CLI from service
                    ren.path(['M', 420, 40, 'L', 420, 330])
                        .attr({
                            'stroke-width': 2,
                            stroke: 'silver',
                            dashstyle: 'dash'
                        })
                        .add();

                    // Headers
                    ren.label('Web client', 20, 40)
                        .css({
                            fontWeight: 'bold'
                        })
                        .add();
                    ren.label('Web service / CLI', 220, 40)
                        .css({
                            fontWeight: 'bold'
                        })
                        .add();
                    ren.label('Command line client', 440, 40)
                        .css({
                            fontWeight: 'bold'
                        })
                        .add();

                    // SaaS client label
                    ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)
                        .attr({
                            fill: colors[0],
                            stroke: 'white',
                            'stroke-width': 2,
                            padding: 5,
                            r: 5
                        })
                        .css({
                            color: 'white'
                        })
                        .add()
                        .shadow(true);

                    // Arrow from SaaS client to Phantom JS
                    ren.path(rightArrow)
                        .attr({
                            'stroke-width': 2,
                            stroke: colors[3]
                        })
                        .translate(95, 95)
                        .add();

                    ren.label('POST options in JSON', 90, 75)
                        .css({
                            fontSize: '10px',
                            color: colors[3]
                        })
                        .add();

                    ren.label('PhantomJS', 210, 82)
                        .attr({
                            r: 5,
                            width: 100,
                            fill: colors[1]
                        })
                        .css({
                            color: 'white',
                            fontWeight: 'bold'
                        })
                        .add();

                    // Arrow from Phantom JS to Batik
                    ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])
                        .attr({
                            'stroke-width': 2,
                            stroke: colors[3]
                        })
                        .add();

                    ren.label('SVG', 255, 120)
                        .css({
                            color: colors[3],
                            fontSize: '10px'
                        })
                        .add();

                    ren.label('Batik', 210, 200)
                        .attr({
                            r: 5,
                            width: 100,
                            fill: colors[1]
                        })
                        .css({
                            color: 'white',
                            fontWeight: 'bold'
                        })
                        .add();

                    // Arrow from Batik to SaaS client
                    ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130,
                            'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])
                        .attr({
                            'stroke-width': 2,
                            stroke: colors[3]
                        })
                        .add();

                    ren.label('Rasterized image', 100, 110)
                        .css({
                            color: colors[3],
                            fontSize: '10px'
                        })
                        .add();

                    // Browser label
                    ren.label('Browser<br/>running<br/>Highcharts', 10, 180)
                        .attr({
                            fill: colors[0],
                            stroke: 'white',
                            'stroke-width': 2,
                            padding: 5,
                            r: 5
                        })
                        .css({
                            color: 'white',
                            width: '100px'
                        })
                        .add()
                        .shadow(true);


                    // Arrow from Browser to Batik
                    ren.path(rightArrow)
                        .attr({
                            'stroke-width': 2,
                            stroke: colors[1]
                        })
                        .translate(95, 205)
                        .add();

                    ren.label('POST SVG', 110, 185)
                        .css({
                            color: colors[1],
                            fontSize: '10px'
                        })
                        .add();

                    // Arrow from Batik to Browser
                    ren.path(leftArrow)
                        .attr({
                            'stroke-width': 2,
                            stroke: colors[1]
                        })
                        .translate(95, 215)
                        .add();

                    ren.label('Rasterized image', 100, 215)
                        .css({
                            color: colors[1],
                            fontSize: '10px'
                        })
                        .add();

                    // Script label
                    ren.label('Script', 450, 82)
                        .attr({
                            fill: colors[2],
                            stroke: 'white',
                            'stroke-width': 2,
                            padding: 5,
                            r: 5
                        })
                        .css({
                            color: 'white',
                            width: '100px'
                        })
                        .add()
                        .shadow(true);

                    // Arrow from Script to PhantomJS
                    ren.path(leftArrow)
                        .attr({
                            'stroke-width': 2,
                            stroke: colors[2]
                        })
                        .translate(330, 90)
                        .add();

                    ren.label('Command', 340, 70)
                        .css({
                            color: colors[2],
                            fontSize: '10px'
                        })
                        .add();

                    // Arrow from PhantomJS to Script
                    ren.path(rightArrow)
                        .attr({
                            'stroke-width': 2,
                            stroke: colors[2]
                        })
                        .translate(330, 100)
                        .add();

                    ren.label('Rasterized image', 330, 100)
                        .css({
                            color: colors[2],
                            fontSize: '10px'
                        })
                        .add();


                }
            }
        },
        title: {
            text: '系统框架结构'
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        }
    });


    $('#pieContainer').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '接口请求占比分布'
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [
            {
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['booking.do', 45.0],
                    ['bookingConfig.do', 26.8],
                    {
                        name: 'update.do',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['config.do', 8.5],
                    ['location.do', 6.2],
                    ['feedback.do', 0.7]
                ]
            }
        ]
    });


    $('#barContainer').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [
            {
                name: 'Year 1800',
                data: [107, 31, 635, 203, 2]
            },
            {
                name: 'Year 1900',
                data: [133, 156, 947, 408, 6]
            },
            {
                name: 'Year 2008',
                data: [973, 914, 4054, 732, 34]
            }
        ]
    });

    $('#areaContainer').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: 'Average fruit consumption during one week'
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF'
        },
        xAxis: {
            categories: [
                'Monday',
                'Tuesday',
                'Wednesday',
                'Thursday',
                'Friday',
                'Saturday',
                'Sunday'
            ],
            plotBands: [
                { // visualize the weekend
                    from: 4.5,
                    to: 6.5,
                    color: 'rgba(68, 170, 213, .2)'
                }
            ]
        },
        yAxis: {
            title: {
                text: 'Fruit units'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' units'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.5
            }
        },
        series: [
            {
                name: 'Chris',
                data: [3, 4, 3, 5, 4, 10, 12]
            },
            {
                name: 'Lily',
                data: [1, 3, 4, 3, 3, 5, 4]
            }
        ]
    });

});